<template>
<div>
  <h1>零售页面</h1>
  <el-form :inline="true" :model="formins" class="demo-form-inline">
    <el-form-item label="收购公司">
      <el-input v-model="formins.productName" placeholder="收购公司"></el-input>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
        v-model="formins.createTimes"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>
      <el-button @click="add" type="primary" size="small">添加</el-button>
      <el-button @click="excel" type="primary" size="small">导出</el-button>
      <el-button @click="gettu" type="primary" size="small">生成报表</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="shopId"
      label="编号"
      width="150">
    </el-table-column>
    <el-table-column
      label="地区"
      width="120">
      <template v-slot="r">
        {{r.row.provinceName}} -- {{r.row.cityName}} -- {{r.row.districtName}}
      </template>
    </el-table-column>
    <el-table-column
      prop="num"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="yphone"
      label="手机号"
      width="120">
    </el-table-column>
    <el-table-column
      label="图片"
      width="120">
      <template v-slot="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.avatar"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop="productName"
      label="收购公司"
      width="300">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="代言人"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="del(scope.row.shopId)" type="text" size="small">删除</el-button>
        <el-button @click="ById(scope.row.bid)" type="text" size="small">生成天气</el-button>
        <el-button @click="tocity(scope.row.shopId)" type="text" size="small">展示天气</el-button>
      </template>
    </el-table-column>
  </el-table>
  //添加
  <el-dialog title="添加" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="选择上传图片的类型">
        <el-select v-model="form.picType" placeholder="请选择">
          <el-option label="营业执照" value="businessLicense"></el-option>
          <el-option label="驾驶证" value="driverLicense"></el-option>
          <el-option label="身份证" value="idCard"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="num" :label-width="formLabelWidth">
        <el-input v-model="form.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省/市/区" :label-width="formLabelWidth">
        <el-cascader
          v-model="cityIds"
          :options="options"
          :props="props"
          @change="handleChange"
          clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          :headers="imagUpload.headers"
          action="http://localhost/dev-api/farmes/retail/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="收购公司" prop="productName" :label-width="formLabelWidth">
        <el-input v-model="form.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="代言人" prop="remark" :label-width="formLabelWidth">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="toadd('form')">确 定</el-button>
    </div>
  </el-dialog>
  //修改
  <el-dialog title="修改" :visible.sync="dialogFormVisible1">
    <el-form :model="user">
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="user.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="user.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省/市/区" :label-width="formLabelWidth">
        <el-cascader
          v-model="cityIds"
          :options="options"
          :props="props"
          @change="handleChange1"
          clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          :headers="imagUpload.headers"
          action="http://localhost/dev-api/farmes/retail/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="user.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="user.remark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="toupdate">确 定</el-button>
    </div>
  </el-dialog>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-sizes="[3, 5, 10, 15]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</div>
</template>

<script>
import {getTree, retailList, save, toupdate} from "@/api/farme/farme";
import {getToken} from "@/utils/auth";

export default {
  name: "RetailView",
  data(){
    return{
      formins:{},
      user:{},
      form:{},
      tableData:[],
      cityIds:["","",""],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      options:[],
      imageUrl:'',
      imagUpload:{
        headers:{Authorization: 'Bearer ' + getToken()}
      },
      total:0,
      pageNum:1,
      pageSize:3,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      formLabelWidth:'120px',
      rules: {
        num: [
          { required: true, message: '请输入数量', trigger: 'blur' },
        ] ,
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        productName: [
          { required: true, message: '请输入收购公司', trigger: 'blur' },
        ],
        remark: [
          { required: true, message: '请输入代言人', trigger: 'blur' },
        ]
      }
    };
  },methods:{

    //修改
    toupdate(){
      toupdate(this.user).then(res=>{
        if(res.code==200){
          this.$message.success("修改成功");
          this.dialogFormVisible1=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //去修改
    update(row){
      console.log(row.aid);
      this.cityIds=[];
      this.dialogFormVisible1=true;
      this.user=row;
      this.imageUrl=row.avatar;
      if(row.aid){
        this.cityIds.push(row.aid,row.bid,row.cid);
      }
      console.log(this.cityIds)
    },
    //添加
    toadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.form).then(res=>{
            if(res.code==200){
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.list();
            }else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tree(){
      getTree().then(res=>{
        this.options=res.data;
      })
    },
    //去添加
    add(){
      this.form={};
      this.form.aid="";
      this.imageUrl="";
      this.dialogFormVisible=true;
    },
    handleChange1(id){
      console.log(id);
      if(id.length>0){
        this.user.aid=id[0];
        this.user.bid=id[1];
        this.user.cid=id[2];
      }else {
        this.user.aid='';
      }
    },
    handleChange(id){
      console.log(id);
      if(id.length>0){
        this.form.aid=id[0];
        this.form.bid=id[1];
        this.form.cid=id[2];
      }else {
        this.form.aid='';
      }
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.list();
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.list();
    },
    list(){
    retailList(this.pageNum,this.pageSize,this.formins).then(res=>{
        this.tableData=res.data.list;
        this.total=res.data.total;
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.avatar=res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created() {
    this.list();
    this.tree();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
